<template>
  <div class="container">
    <column-list :list="testData"></column-list>
    <ul>
      <li v-for="item in dataList" :key="item.id">
        {{ item.id }}, {{ item.orderTypeName }}
      </li>
    </ul>
    <button class="btn btn-primary" @click="loadMorePage" v-if="!isLastpage">
      加载订单
    </button>
  </div>
</template>
<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue';
import ColumnList, { ColumnProps } from '@/components/ColumnList.vue';
import { useStore } from 'vuex';
import { VuxProps, OrderProps } from '@/store';
import userLoadMore from '@/hooks/userLoadMore';

const testData: ColumnProps[] = [
  {
    id: 1,
    title: 'test1的专栏',
    description: '这是test1的专栏，有一段非常有意思的简介，可以更新一下哦',
    avatar:
      'https://cdn.e-ports.com/public/img/building.jpg?x-oss-process-image/resize,m_pad,h_50,w_50',
  },
  {
    id: 2,
    title: 'test2的专栏',
    description: '这是test2的专栏，有一段非常有意思的简介，可以更新一下哦',
    avatar: 'https://cdn.e-ports.com/public/img/building.jpg',
  },
];

export default defineComponent({
  name: 'APP',
  components: { ColumnList },
  setup() {
    const store = useStore<VuxProps>();
    const total = computed(() => store.state.order.total);
    const { loadMorePage, isLastpage } = userLoadMore('fetchOrders', total);
    onMounted(() => {
      store.dispatch('fetchOrders', { current: 1, size: 2 });
    });
    const dataList = computed(() => store.getters.getterOrders);
    return {
      testData,
      isLastpage,
      loadMorePage,
      dataList,
    };
  },
});
</script>

<style lang="scss">
</style>
